<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <br /><br />
    <center>
      <div>
        <Avatar :src="src" :width="150" fit="fill"></Avatar>
      </div>
      <div>
        头像上传：<input type="file" id="img" /> <br /><br />
        <Button color="green" @click="upload">上传</Button>
      </div>
      <br /><br />
      <div>
        七牛云上传：<input type="file" id="img_qiniu" /> <br /><br />{{
          loadpercent
        }}
        <Button color="green" @click="upload_qiniu">上传</Button>
      </div>
      <br /><br />
      <!-- 视频播放地址 -->
      <video
        :src="video"
        width="500px"
        controls="controls"
        v-show="video"
      ></video>
      <br /><br />
      <div>
        上传视频：<input type="file" id="video" /> <br /><br />
        <Button color="green" @click="upload_video">上传</Button>
      </div>
      <br /><br />
      <!-- 关注商品列表 -->
      <h3>关注商品列表</h3>
      <br />
      <Checkbox :datas="goods" v-model="good_value"></Checkbox>
      <br /><br />
      <Button color="red" @click="flow">批量取消关注</Button>
    </center>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";

export default {
  data() {
    return {
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "个人主页" }
      ],
      first_p: "",
      sec_p: "",
      src: "",
      video: "",
      // 七牛上传凭证
      uptoken: "",
      // 进度条
      loadpercent: "",
      // 关注商品列表
      goods: [],
      good_value: [],
      myid: {}
    };
  },
  mounted: function() {
    var filename = localStorage.getItem("filename");
    if (filename) {
      this.src = "http://localhost:8000/static/upload/" + filename;
    } else {
      this.src = localStorage.getItem("Qiniu_src");
    }
    var vname = localStorage.getItem("videoname");
    if (vname) {
      this.video = "http://localhost:8000/static/upload/" + vname;
    }
    // 获取uptoken
    this.get_uptoken();
    // 获取商品列表
    this.get_goods();
  },
  methods: {
    // 上传文件
    upload: function() {
      //   声明参数类型
      let formData = new FormData();
      // 查找文件对象
      var img = document.getElementById("img").files[0];
      if (img) {
        // 添加文件
        formData.append("file", img);
        // 添加uid
        formData.append("uid", localStorage.getItem("uid"));
        // 请求后台接口
        this.axios({
          url: "http://localhost:8000/uploadfile/",
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }).then(res => {
          console.log(res);
          localStorage.setItem("filename", res.data.filename);
          localStorage.removeItem("Qiniu_src");
          this.$Message("上传成功");
          this.src = "http://localhost:8000/static/upload/" + res.data.filename;
        });
      }
    },
    // 上传七牛云
    upload_qiniu: function() {
      //   声明参数类型
      let formData = new FormData();
      // 查找文件对象
      var img = document.getElementById("img_qiniu").files[0];
      if (img) {
        // 添加文件
        formData.append("file", img);
        // 添加token
        formData.append("token", this.uptoken);

        // 定制axios
        const axios_qiniu = this.axios.create({ withCredentials: false });
        // 发送请求
        axios_qiniu({
          method: "post",
          url: "http://up-z1.qiniu.com/",
          data: formData,
          timeout: 30000,
          // 设置上传进度
          onUploadProgress: e => {
            // 设置总进度对象  已上传字节数 / 总字节数
            var complete = e.loaded / e.total;

            // 安慰剂按钮
            if (complete < 1) {
              this.loadpercent = (complete * 100).toFixed(2) + "%";
            }
          }
        }).then(res => {
          if (res.status == 200) {
            this.$Message("上传七牛云成功");
            // 上传成功后，进度条变为100%
            this.loadpercent = "100%";
            // 赋值
            var Nsrc = "http://q79ifqd1q.bkt.clouddn.com/" + res.data.hash;
            this.src = Nsrc;
            localStorage.removeItem("filename");
            localStorage.setItem("Qiniu_src", Nsrc);
            this.axios({
              url: "http://localhost:8000/uploadfile/",
              params: {
                Qiniu_src: String(Nsrc),
                uid: localStorage.getItem("uid")
              }
            });
          }
        });
      }
    },
    // 获取七牛云凭证
    get_uptoken() {
      this.axios({
        url: "http://localhost:8000/uptoken/"
      }).then(res => {
        this.uptoken = res.data.token;
      });
    },
    upload_video: function() {
      //   声明参数类型
      let formData = new FormData();
      // 查找文件对象
      var video = document.getElementById("video").files[0];
      if (video) {
        // 添加文件
        formData.append("file", video);
        // 添加uid
        formData.append("uid", localStorage.getItem("uid"));
        this.axios({
          url: "http://localhost:8000/uploadvideo/",
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }).then(res => {
          this.$Message(res.data.msg);
          localStorage.setItem("videoname", res.data.videoname);
          this.video =
            "http://localhost:8000/static/upload/" + res.data.videoname;
        });
      }
    },
    // 获取关注商品
    get_goods: function() {
      this.axios({
        url: "http://localhost:8000/userflow/",
        params: {
          uid: localStorage.getItem("uid")
        }
      }).then(res => {
        var goods = [];
        for (let i = 0, l = res.data.length; i < l; i++) {
          goods.push(res.data[i].name);
          this.myid[res.data[i].name] = res.data[i].id;
        }
        // 赋值
        this.goods = goods;
        this.good_value = goods;
      });
    },
    // 批量操作
    flow: function() {
      var goods = [];
      for (let i = 0, l = this.good_value.length; i < l; i++) {
        goods.push(this.myid[this.good_value[i]]);
      }
      var glist = JSON.stringify(goods);
      this.axios({
        url: "http://localhost:8000/getflow/",
        params: {
          uid: localStorage.getItem("uid"),
          gids: glist,
          type: 2
        }
      }).then(res => {
        this.$Message(res.data.msg);
      });
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter
  }
};
</script>
 
<style>
</style>